<template>
	<div class="avatar-item">
		<img class="avatar-preview" v-if="userInfo.avatar" :src="userInfo.avatar"/>
		<div class="avatar-default" v-else>
			<span>头像</span>
		</div>
		<div class="avatar-uploader" @click="uploadClickHandler">
			<img v-if="userInfo.avatar" class="avatar-uploader-icon" :src="userInfo.avatar"/>
			<el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
			<input ref="fileRef" type="file" style="display: none;"  @change="chooseFileHandler"/>
		</div>
		<el-button type="success" @click="saveAvatarHandler" v-if="isAvatarModify">保存</el-button>
	</div>
	<el-divider></el-divider>
	<el-tabs tab-position="left" type="border-card" class="info_tab">
	  <el-tab-pane label="基本信息" class="info_tab-pane">
		  <div class="base-info-tab-pane">
			  <el-form label-width="80px">
				  <el-form-item label="昵称">
				  	<el-input v-model="userInfo.nickname" maxlength="32"></el-input>
				  </el-form-item>
				  <el-form-item label="性別">
				  	<el-radio-group v-model="userInfo.gender">
				  					<el-radio :label="0">未设置</el-radio>
				  					<el-radio :label="1">男</el-radio>
				  					<el-radio :label="2">女</el-radio>
				  				</el-radio-group>
				  </el-form-item>
				  <el-form-item label="出生日期">
				  	<el-date-picker 
					v-model="userInfo.birthday"  
					format="YYYY-MM-DD" 
					value-format="YYYY-MM-DD" 
					:editable="false" 
					type="date" 
					placeholder="请选择出生日期"
					></el-date-picker>
				  </el-form-item>
				  <el-form-item label="手机号">
				  	<el-input placeholder="请输入手机号" maxlength="16" v-model="userInfo.mobile"></el-input>
				  </el-form-item>
				  <el-form-item label="邮箱">
				  	<el-input placeholder="请输入邮箱" maxlength="32" v-model="userInfo.email"></el-input>
				  </el-form-item>
			  </el-form>
			  <el-button type="primary" @click="baseInfoSaveHandler">保存</el-button>
		  </div>
	  </el-tab-pane>
	  <el-tab-pane label="密码设置" class="info_tab-pane">
		  <div class="base-info-tab-pane">
			  <el-form label-width="80px" :rules="passwdFormRule" ref="passwdFormRef" :model="passwd">
				  <el-form-item label="原密码" prop="originalPassword">
				  		<el-input type="password" v-model="passwd.originalPassword" maxlength="32" show-password></el-input>
				  </el-form-item>
				  <el-form-item label="新密码" prop="newPassword">
				  	  <el-input type="password" v-model="passwd.newPassword" maxlength="32" show-password></el-input>
				  </el-form-item>
				  <el-form-item label="确认密码" prop="confirmPasswd">
				  	  <el-input type="password" v-model="passwd.confirmPasswd" maxlength="32" show-password></el-input>
				  </el-form-item>
			  </el-form>
			  <el-button type="primary" @click="passwdSaveHandler">保存</el-button>
		  </div>
	  </el-tab-pane>
	</el-tabs>
</template>

<script>
import { upload } from '@/api/file'
import { getInfo, modify, modifyPasswd } from '@/api/user'
import { ElMessage } from 'element-plus'
export default{
	name: 'User',
	data() {
		const that = this
		return {
			isAvatarModify: false,
			userInfo: {
				nickname: '',
				avatar: '',
				gender: 0,
				birthday: '1970-01-01',
				email: '',
				mobile: ''
			},
			passwd: {
				originalPassword: '',
				newPassword: '',
				confirmPasswd: ''
			},
			passwdFormRule: {
				originalPassword: [
					{
						validator: function(rule,value,callback){
								if(value === ''){
									callback(new Error('原密码不能为空!'))
								}else{
									callback()
								}
							},
						trigger: 'blur'
					}
				],
				newPassword: [
					{
						validator: function(rule,value,callback){
								if(value === ''){
									callback(new Error('新密码不能为空!'))
								}else{
									callback()
								}
							},
						trigger: 'blur'
					}
				],
				confirmPasswd: [
					{
						validator: function(rule,value,callback){
								if(value === ''){
									callback(new Error('确认密码不能为空!'))
								}else if(value !== that.passwd.newPassword){
									callback(new Error('两次新密码不一致!'))
								}else{
									callback()
								}
							},
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		getUserInfo: function(){
			getInfo()
			.then(res =>{
				if(res.code === 0){
					console.log(res)
					this.userInfo = res.data
				}else{
					ElMessage.error(res.msg)
				}
				
			})
		},
		uploadClickHandler: function(){
			this.$refs.fileRef.click()
		},
		chooseFileHandler: function(e){
			if(e.target.files){
				upload({
					file: e.target.files[0],
					docId: 0
				}).then((res) => {
					let url = res.data.url
					if(!String(url).startsWith('http')){
						url = import.meta.env.APP_SERVER + import.meta.env.APP_BASE_URL + url
					}
					this.userInfo.avatar = url
					this.isAvatarModify = true
				})
			}
		},
		saveUserInfo: function(){
			modify({...this.userInfo})
			.then((res) => {
				if(res.code === 0){
					ElMessage.success('保存成功')
				}else{
					ElMessage.error('保存失败')
				}
			})
		},
		saveAvatarHandler: function(){
			this.saveUserInfo()
		},
		baseInfoSaveHandler: function(){
			this.saveUserInfo()
		},
		passwdSaveHandler: function(){
			let that = this
			this.$refs.passwdFormRef.validate((valid) =>{
				if(valid){
					modifyPasswd({...this.passwd})
					.then((res) => {
						if(res.code === 0){
							that.$refs.passwdFormRef.resetFields()
							ElMessage.success('保存成功')
						}else{
							ElMessage.error(res.msg)
						}
					})
				}else{
					return false
				}
			})
			
		}
	},
	mounted() {
		this.getUserInfo()
	}
}
</script>

<style scoped>
.avatar-item{
	height: 200px;
	border: 1px dashed #409EFF;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20px;
}
.avatar-preview{
	height: 150px;
	width: 150px;
	border-radius: 50%;
	background-color: #CCCCCC;
}
.avatar-default{
	height: 150px;
	width: 150px;
	border-radius: 50%;
	background-color: #CCCCCC;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	font-size: 30px;
	font-weight: bold;
}
.avatar-uploader{
	height: 150px;
	width: 150px;
	border: 1px dashed var(--el-border-color);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
	margin: 0 auto;
}
.avatar-uploader-icon {
  font-size: 28px;
  width: 150px;
  height: 150px;
  text-align: center;
  font-weight: bold;
}
.info_tab{
	height: calc(100vh - 435px);
}
.info_tab-pane{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.base-info-tab-pane{
	width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
</style>